<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>wangEditor get HTML</title>
  <link href="/static/wang_editor/style.css" rel="stylesheet">
  <style>
    html,body { overflow: hidden; margin: 0; padding: 0;  }
  </style>
</head>

<body>
  <demo-nav title="wangEditor get HTML"></demo-nav>
  <div class="page-container">
    <div class="page-left">
      <demo-menu></demo-menu>
    </div>
    <div class="page-right">
      <!-- 编辑器 DOM -->
      <div style="border: 1px solid #ccc;">
        <div id="editor-toolbar" style="border-bottom: 1px solid #ccc;"></div>
        <div id="editor-text-area" style="height:310px"></div>
      </div>
    </div>
  </div>

  <script src="/static/wang_editor/index.min.js"></script>
  <script src="/static/layui/layui.js"></script>
  <script>

    layui.use("jquery",function(){
      $=layui.$
      height=$(document).height() - $("#editor-toolbar").height()-18 + 'px'
      
      $("#editor-text-area").css({"height":height})
    })

    // 获取父节点的app
    app=window.parent.getApp();

    var $E = {};

    // 赋值/设置内容
    $E.setContent = function (content) {
      editor.select([])
      editor.deleteFragment()

      E.SlateTransforms.setNodes(editor, { type: 'paragraph' }, { mode: 'highest' })
      editor.dangerouslyInsertHtml(content)
    }

    // 获取渲染内容
    $E.getContentRender = function (content) {
      return editor.getHtml()
      // return editor.getHTML()
    }

    // 取原始内容
    $E.getContent = function (content) {
      return editor.getHtml()
    }

    // 光标处插入内容
    $E.insertValue = function (content) {
      editor.insertText(content)
    }

    const E = window.wangEditor

    // 切换语言
    const LANG = location.href.indexOf('lang=en') > 0 ? 'en' : 'zh-CN'
    E.i18nChangeLanguage(LANG)
    const editorUploadConfig = {
        server: '/api/personal/uploadArticleFile', // 上传图片地址
        timeout: 5 * 1000, // 5s
        fieldName: 'file',
        headers: { Accept: 'text/x-json' },
        maxFileSize: 10 * 1024 * 1024, // 10M
        headers: { "token": app.base.getUserInfo().token },
        // // 用户自定义插入图片
        customInsert(res, insertFn) {
          console.log('customInsert', res)
          if(res.code==0){
            insertFn(res.data, "", "")
          }
        },
      }

    // 创建编辑器
    window.editor = E.createEditor({
      selector: '#editor-text-area',
      // html: '<p>hello&nbsp;world</p><p><br></p>',
      config: {
        placeholder: '请尽情的书写吧...',
        MENU_CONF: {
          uploadImage: editorUploadConfig
        },
        onChange(editor) {
          const html = editor.getHtml()
          // document.getElementById('editor-content-view').innerHTML = html
          // document.getElementById('editor-content-textarea').value = html
        }
      }
    })


    window.toolbar = E.createToolbar({
      editor,
      selector: '#editor-toolbar',
      config: {
        toolbarKeys: [
          "headerSelect",
          "blockquote",
          "|",
          "bold",
          "underline",
          "italic",
          {
            "key": "group-more-style",
            "title": "更多",
            "iconSvg": "<svg viewBox=\"0 0 1024 1024\"><path d=\"M204.8 505.6m-76.8 0a76.8 76.8 0 1 0 153.6 0 76.8 76.8 0 1 0-153.6 0Z\"></path><path d=\"M505.6 505.6m-76.8 0a76.8 76.8 0 1 0 153.6 0 76.8 76.8 0 1 0-153.6 0Z\"></path><path d=\"M806.4 505.6m-76.8 0a76.8 76.8 0 1 0 153.6 0 76.8 76.8 0 1 0-153.6 0Z\"></path></svg>",
            "menuKeys": [
              "clearStyle",
              "through",
              "code",
              "sup",
              "sub",
            ]
          },
          "color",
          "bgColor",
          "lineHeight",
          
          "fontSize",
          "fontFamily",
          "|",
          "bulletedList",
          "numberedList",
          "todo",
          {
            "key": "group-justify",
            "title": "对齐",
            "iconSvg": "<svg viewBox=\"0 0 1024 1024\"><path d=\"M768 793.6v102.4H51.2v-102.4h716.8z m204.8-230.4v102.4H51.2v-102.4h921.6z m-204.8-230.4v102.4H51.2v-102.4h716.8zM972.8 102.4v102.4H51.2V102.4h921.6z\"></path></svg>",
            "menuKeys": [
              "justifyLeft",
              "justifyRight",
              "justifyCenter",
              "justifyJustify"
            ]
          },
          {
            "key": "group-indent",
            "title": "缩进",
            "iconSvg": "<svg viewBox=\"0 0 1024 1024\"><path d=\"M0 64h1024v128H0z m384 192h640v128H384z m0 192h640v128H384z m0 192h640v128H384zM0 832h1024v128H0z m0-128V320l256 192z\"></path></svg>",
            "menuKeys": [
              "indent",
              "delIndent"
            ]
          },
          "|",
          "emotion",
          "insertLink",
          {
            "key": "group-image",
            "title": "图片",
            "iconSvg": "<svg viewBox=\"0 0 1024 1024\"><path d=\"M959.877 128l0.123 0.123v767.775l-0.123 0.122H64.102l-0.122-0.122V128.123l0.122-0.123h895.775zM960 64H64C28.795 64 0 92.795 0 128v768c0 35.205 28.795 64 64 64h896c35.205 0 64-28.795 64-64V128c0-35.205-28.795-64-64-64zM832 288.01c0 53.023-42.988 96.01-96.01 96.01s-96.01-42.987-96.01-96.01S682.967 192 735.99 192 832 234.988 832 288.01zM896 832H128V704l224.01-384 256 320h64l224.01-192z\"></path></svg>",
            "menuKeys": [
              "insertImage",
              "uploadImage"
            ]
          },
          {
            "key": "group-video",
            "title": "视频",
            "iconSvg": "<svg viewBox=\"0 0 1024 1024\"><path d=\"M981.184 160.096C837.568 139.456 678.848 128 512 128S186.432 139.456 42.816 160.096C15.296 267.808 0 386.848 0 512s15.264 244.16 42.816 351.904C186.464 884.544 345.152 896 512 896s325.568-11.456 469.184-32.096C1008.704 756.192 1024 637.152 1024 512s-15.264-244.16-42.816-351.904zM384 704V320l320 192-320 192z\"></path></svg>",
            "menuKeys": [
              "insertVideo",
              // "uploadVideo"
            ]
          },
          "insertTable",
          "codeBlock",
          "divider",
          "|",
          "undo",
          "redo",
          // "|",
          // "fullScreen"
        ]
      }
    })

    // console.log(window.toolbar.getConfig().toolbarKeys)
  </script>
</body>

</html>